<template>
  <div class="dashboard-container">
    <!--第一栏开始-->
    <el-row class="row1">
      <el-col :span="4">
        <p style="font-size: larger">缺陷管理</p>
      </el-col>
      <el-col :offset="14"  :span="6" style="margin-top: 15px;">
        <span>
          <el-button class="proButton" @click="createBug">新建缺陷</el-button>
        </span>
        <span style="margin-left: 20px">
          <el-dropdown
            @command="handleCommand"
            :tabindex="3"
            trigger="click">
            <el-button>
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="缺陷导出">缺陷导出</el-dropdown-item>
             <el-dropdown-item command="缺陷导入">
                <el-upload 
                  action="http://localhost:8084/bug/importBugExcel"
                  :show-file-list=false
                  :data="{'proId':projectId,'userId':userInfo.id}"
                  :on-success="uploadSuccess"
                  :on-error="uploadError"
                  multiple>
                  <el-button type="text">缺陷导入</el-button>
                </el-upload>
             </el-dropdown-item>
             <el-dropdown-item command="自定义列" disabled>自定义列</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </el-col>
    </el-row>
    <!--第一栏结束-->
    <el-divider></el-divider>
    <!--第二栏开始-->
    <div>
      <el-radio-group v-model="radio1" @change="radioChange">
        <span><el-radio-button label="全部"></el-radio-button></span>
        <span style="margin-left: 5px"><el-radio-button label="我提交的"></el-radio-button></span>
        <span style="margin-left: 5px"><el-radio-button label="待我处理的"></el-radio-button></span>
      </el-radio-group>
    </div>
    <!--第二栏结束-->
    <!--第三栏开始-->
    <div style="margin-top: 10px">
      <bug-table ref="bugTable"></bug-table>
    </div>
    <!--第三栏结束-->
    <!--  弹出框 显示bug详情的  -->
    <el-drawer
      title=">>缺陷详情"
      size='60%'
      :modal="false"
      :modal-append-to-body="false"
      :destroy-on-close="true"
      :visible.sync="drawerBugInformation">
      <bugInformation v-bind:bugInfo="bugInfo"></bugInformation>
    </el-drawer>
  </div>
</template>

<script>
  import BugTable from '@/views/proDetails/bugManage/bugTable/index'
  import BugInformation from '@/views/proDetails/bugManage/bugInformation/index'
  import { exportBugExcel } from '@/api/bug'
  import { mapGetters } from 'vuex'

  export default {
    name: 'bugManage',
    components: { BugTable, BugInformation },
    data() {
      return {
        radio1: '全部',                //三个按钮筛选绑定的值
        drawerBugInformation: false,  //bug详情的弹出框是否显示的值
        bugInfo: '',                   //绑定bug信息用来传给子组件
      }
    },
    computed:{
      ...mapGetters(["projectId","userInfo"])
    },
    methods: {
      //更多操作选择器的方法
      handleCommand(command) {
        if(command === '缺陷导出'){
          let url = exportBugExcel(this.projectId)
          window.open(exportBugExcel(this.projectId),'_blank')
        }
      },
      //调用表格筛选的方法
      radioChange(label) {
        this.$refs.bugTable.radioChangeFilterData(label)
      },
      // 新建缺陷按钮方法
      createBug(){
        this.$router.push('/proDetails/createBug')
      },
      //点击表格查看右抽屉调用方法，由子组件bugTable调用
      drawerBugInformationChange(row){
        this.bugInfo = row
        this.drawerBugInformation = true
      },
      //导入成功的回调
      uploadSuccess(){
        this.$message({type: 'success',message:'导入成功'})
        this.$refs.bugTable.getBugs()
      },
      //导入失败后的回调
      uploadError(){
        this.$message({type: 'error',message:'导入失败'})
      }
    }
  }
</script>

<style lang="scss" scoped>
.row1{
  min-width: 1008px;
}
</style>
